<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            padding: 5px;
            border: 2px solid transparent;
            /* display: none; */
            /* margin: 100px; */
            position: absolute;
            left: 100px;
            top: 100px;

        }
        .active{
            border-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box one two three"></div>
</body>
<script>
    var box = document.getElementsByClassName("box")[0];
    console.dir(box);

    // className 获取和设置class名
    // classList 获取当前元素 class列表的集合

    // 总结: 
    // 一般情况下,单class名习惯用className,多class名习惯用classList

    console.log(box.className);
    console.log(box.classList);

    // box.className = "abc" ; //修改整个字符串
    // box.className = box.className.replace("one","first");  //修改某一个类名

    // 拓展 box.classList相关的属性和方法

    // 属性
    // length   返回匹配元素class名的个数

    // 方法
    // add()          向匹配元素追加一个或多个class名
    // remove()       删除匹配元素中一个或多个class名
    // replace()      将匹配元素的class名 替换为 新class名
    // contains()     判断匹配元素中是否含有某个class名  => 有:true 没有就是:false
    // toggle()       判断匹配元素中是否含有某个class名  => 有就删除  没有=>新增

    box.classList.add("four","five");
    box.classList.remove("three","four");

    box.classList.replace("one","first");

    console.log(box.classList.contains("one"));
    console.log(box.classList.contains("two"));


    console.log(box);

    box.onclick = function(){
        this.classList.toggle("active");
    }




</script>
</html>